<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="add-box com-box">
			<view class="row">
				<text class="tit">联系人</text>
				<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" />
			</view>
			<view class="row">
				<text class="tit">手机号</text>
				<input class="input" type="text" v-model="addressData.phone" placeholder="收货人手机号码" />
			</view>

			<view class="row">
				<text class="tit">城市</text>
				<input placeholder="请选择城市" disabled="true" :value="lotusAddressData.address" @click="lotusAddressData.visible = true"
				 class="input">
				<lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>
				</input>
				<text class="icon icon-region" @click="lotusAddressData.visible = true"></text>
			</view>
			<view class="row">
				<text class="tit">详细</text>
				<input class="input" type="text" v-model="addressData.address" placeholder="街道、楼号、门牌" />
			</view>

			<view class="row default-row">
				<text class="tit">设为默认</text>
				<switch :checked="addressData.isDefault>0?true:false" color="#0251f4" @change="switchChange" />
			</view>
			<button type="primary" class="add-btn" @click="confirm">保存</button>
		</view>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>
</template>

<script>
	import lotusAddress from "@/components/uni-lotusAddress/uni-lotusAddress.vue"
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	export default {
		components: {
			lotusAddress,
			uniHeader,
			uniFooter
		},
		data() {
			return {
				addressData: {},
				lotusAddressData: {
					visible: false,
					address: ''
				},
			}
		},
		onLoad(option) {
			let title = '新增收货地址'
			if (option.type === 'edit') {
				title = '编辑收货地址'
				this.addressData = JSON.parse(option.data)
				this.lotusAddressData.address = this.addressData.provinceName + ' ' + this.addressData.cityName + ' ' + this.addressData
				console.log(this.addressData)
			}
			this.manageType = option.type
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {
			switchChange(e) {
				this.addressData.isDefault = e.detail.value ? 1 : 0
			},
			choseValue(res) {
				//res数据源包括已选省市区与省市区code
				this.lotusAddressData.visible = false //visible为显示与关闭组件标识true显示false隐藏
				if (res.isChose) {
					this.lotusAddressData.address = res.province + ' ' + res.city + ' ' + res.town //全
					//赋值到addressData
					this.addressData.provinceId = res.provinceCode
					this.addressData.cityId = res.cityCode
					this.addressData.townId = res.townCode
				}
			},
			//提交
			confirm() {
				let data = this.addressData
				console.log(data)
				if (!data.name) {
					this.$api.msg('请填写收货人姓名')
					return
				}
				if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.phone)) {
					this.$api.msg('请输入正确的手机号码')
					return
				}
				if (!data.provinceId) {
					this.$api.msg('请选择省市区')
					return
				}
				if (!data.cityId) {
					this.$api.msg('请选择二级城市')
					return
				}
				if (!data.townId) {
					this.$api.msg('请选择三级区或县')
					return
				}
				if (!data.address) {
					this.$api.msg('请输入详细地址')
					return
				}
				//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
				//this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`)
				this.addressData.isDefault = this.addressData.isDefault ? this.addressData.isDefault : 0
				if (this.manageType === 'edit') {
					this.$api.request('/zraddress/changeAddress', {
						id: this.addressData.id,
						...this.addressData
					}, {
						content: 'application/x-www-form-urlencoded'
					}).then(res => {
						this.$api.prePage().refreshList()
						uni.navigateBack()
					})
				} else {
					this.$api.request('/zraddress/addAddress', {
						...this.addressData
					}, {
						content: 'application/x-www-form-urlencoded'
					}).then(res => {
						this.$api.prePage().refreshList()
						uni.navigateBack()
					})
				}
			},
		},
	}
</script>

<style lang="scss">
	page {
		padding-top: 20upx;
	}

	.default-row {
		margin-top: 20upx;
		border: 0;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(20upx) scale(.9);
		}
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		page {
			padding-top: 0;
		}

		.add-box {
			margin: 20px auto;
		}

		.default-row {
			margin-top: 20px;
			border: 0;

			switch {
				transform: translateX(20px) scale(.9);
			}
		}
	}

	/* #endif */
</style>
